<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { ref, getCurrentInstance, onMounted, onUnmounted } from "vue";
import axios from "axios";
import videojs from "video.js";
import "video.js/dist/video-js.css";

interface Proxy {
  $t(str: string): string;
}

const { $t } = getCurrentInstance()!.proxy as unknown as Proxy;

const { locale } = useI18n();
const checked = ref<boolean>(true);
const onChange = (val: boolean) => {
  if (val) {
    locale.value = "zh";
  } else {
    locale.value = "en";
  }

  console.log($t("common.expired"));
};

function transformToTree(items: any) {
  return items.map((item: any) => {
    const node: any = {
      label: "",
      value: "",
    };

    if (item.File) {
      node.label = item.File.name;
      node.value = item.File.path;
    } else if (item.Directory && item.Directory.contents) {
      node.label = item.Directory.name;
      node.value = item.Directory.path;
      node.children = transformToTree(item.Directory.contents);
    }

    return node;
  });
}

const loading = ref(false);
const getData = () => {
  loading.value = true;

  axios
    .get("https://870403pu13.vicp.fun/api/video")
    .then((res) => {
      loading.value = false;
      if (res.status === 200) {
        console.log(res.data);
        console.log(transformToTree(res.data.Directory.contents));
      }
    })
    .catch((err) => {
      console.log(err);
      loading.value = false;
    });
};

// 看直播
const videoRef = ref()
onMounted(() => {
  const myVideo = videojs(videoRef.value)
})
</script>

<template>
  <div style="background-color: #222; height: calc(100vh - 220px)">
    首页
    <t-row>
      <t-button>{{ $t("common.save") }}</t-button>
    </t-row>
    <t-row>
      中英切换
      <t-switch v-model="checked" @change="onChange" />
      <t-button @click="getData" :loading="loading">获取数据</t-button>
    </t-row>
    <button class="father">
      <div class="son"></div>
      <div class="content">
        <p>按钮</p>
        <div></div>
      </div>
    </button>
    <video 
      id="myVideo" 
      class="video-js vjs-default-skin vjs-big-play-centered" 
      width="1280"
      height="720" 
      controls 
      preload="auto" 
      data-setup='{}'
      ref="videoRef"
    >    
      <source 
        id="source" 
        src="http://127.0.0.1/streaming/index.m3u8"  
        type="application/x-mpegURL"
      >
    </video>
  </div>
</template>

<style lang="scss" scoped>
// video {
//   width: calc(1920px);
//   height: calc(1080px);
// }

.father {
  width: 200px;
  height: 48px;
  position: relative;
  background-color: #333;
  overflow: hidden;
  margin-top: 24px;
  margin-left: 24px;
  box-shadow: 0px 0px 16px #33333350;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: all 0.3s;
  .content {
    width: calc(100% - 4px);
    height: calc(100% - 4px);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #333;
    border-radius: 6px;
    transition: all 0.3s;
    overflow: hidden;
    p {
      color: #ffffff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
    }
    div {
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background-color: #333;
      z-index: 1;
      opacity: 0;
    }
  }
  .son {
    width: 100%;
    height: 500%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
    background-color: #fff;
    transform-origin: center;
    animation: identifier 12s infinite linear;
    background-image: linear-gradient(45deg, #000 30%, #fff 50%, #000 70%);
  }

  @keyframes identifier {
    0% {
      width: 120%;
      height: 120%;
      transform: translate(-50%, -50%) rotate(0deg);
    }
    12% {
      width: 100%;
      height: 500%;
    }
    25% {
      width: 40%;
      height: 500%;
    }
    37% {
      width: 100%;
      height: 500%;
    }
    50% {
      width: 100%;
      height: 500%;
    }
    62% {
      width: 100%;
      height: 500%;
    }
    75% {
      width: 100%;
      height: 500%;
    }
    87% {
      width: 100%;
      height: 500%;
    }
    100% {
      width: 120%;
      height: 120%;
      transform: translate(-50%, -50%) rotate(360deg);
    }
  }

  &:hover {
    box-shadow: 0px 4px 16px #00000050;
    .content {
      background-color: #111;
      div {
        transition: all 0.3s;
        opacity: 1;
      }
    }
  }

  &:active {
    transform: translate(0, 2px) scale(0.95);
    .content {
      div {
        transition: all 0.2s;
        left: 0;
      }
    }
  }
}
</style>
